<template>
    <div class="Shouchang">
      <!-- 购物车商品 -->
  
      <div class="living-item">
          <div class="item-left" v-show="show">
              <input name="checkbox" value="Item 1" type="checkbox" class="tui-checkbox"/>
          </div>
          <div class="item-right">
              <div class="top-conetnt">
                  <div class="content-img">
                      <img class="auto-img" :src="pro.img" alt="">
                  </div>
                  <div class="conentn-nr">
                      <div class="nr-title">{{pro.name}} </div>
                      <div class="zhijiang">直降</div>
                      <div class="current-price">&yen;{{pro.currentPrice}}</div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Shouchang",
    props:{
        show:{
            type:Boolean,
            default:""
        },
        pro:{
            type:Object,
            default:""
        }
    },
    data() {
      return {
          //步进器
          value:0
      }
    },
    created() {

    },
    methods:{
        
    }
  };
  </script>
   
  <style lang="scss" scoped>
  .zhijiang{
    margin-left: 10px;
    width: 40px;
    color: white;
    background-color: #f95e38;
    text-align: center;
    padding: 3px 0;
    margin-bottom: 10px;
    
  }
  .livingDetails{
      background-color: white;
  }
  .nr-fenlei{
      border-radius: 15px;
      padding: 0 10px;
      font-size: 16px;
      width: auto;
  }
  .nr-title{
      height: 40px;
      font-size: 16px;
      padding: 5px 10px;
      box-sizing: border-box;
  
  }
  .jiu-price{
      font-size: 18px;
      color: rgb(77, 76, 76);
      margin-left: 5px;
  
  }
  .current-price{
      font-size: 20px;
      font-weight: bold;
      color: #e4393c;
      margin-left: 10px;
  }

  .conentn-nr{
      height: 80px;
      width: 100%;
  }
  .content-img{
      width: 120px;
      height: 90px;
      border: 1px solid rgb(218, 218, 218);
     margin-top: 5px;
  }
  .top-conetnt{
      display: flex;
      height: 100px;
      width: 100%;
  }
  .item-right{ 
     height: 100px;
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 15px;
  }
  .tui-checkbox{
      position: absolute;
      top: 45px;
      left: 5px;
  }
  .living-item{
      display: flex;
  }
  .item-left{
      position: relative;
      height: 100px;
      width: 40px;
  }
  
  
  //设置选中背景
  .tui-checkbox:checked {
    background: #1673ff;
  }
  //设置复选框样式
  .tui-checkbox {
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    border: solid 1px #c7c6c6;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
  }
  //设置伪类，即显现的对勾样式
  .tui-checkbox:checked::after {
    content: "";
    top: 5px;
    left: 5px;
    position: absolute;
    background: transparent;
    border: #fff solid 2px;
    border-top: none;
    border-right: none;
    height: 6px;
    width: 10px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .living-item {
    border-bottom: 1px solid rgb(194, 194, 194);
  }
  </style>